<!-- @format -->
<template>
  <div
    :class="{
      theme: type == 'theme',
      noborderRadius: type == 'noborderRadius',
    }"
  >
    <!-- title="" -->
    <el-dialog
      close-icon="none"
      :model-value="modelValue"
      :top="top"
      :width="width"
      :style="style"
      center
      class="confirm-receipt-dialog"
      @close="onCancel"
    >
      <div class="comp-dialog-title"><slot name="title"></slot></div>
      <slot> </slot>
      <template #footer v-if="showFooter">
        <div class="dialog-footer">
          <comp-button
            class="cancel-btn"
            :style="
              theDeviceType.isPC
                ? {
                    padding: '15px 64px',
                    'border-radius': '50px',
                  }
                : {}
            "
            :text="cancelText"
            @click.native="onCancel"
          ></comp-button>
          <comp-button
            class="cancel-btn"
            :style="
              theDeviceType.isPC
                ? {
                    padding: '15px 64px',
                    'border-radius': '50px',
                  }
                : {}
            "
            :text="okText"
            type="primary"
            @click.native="onOk"
          />
        </div>
        <div class="comp-dialog-tip" v-if="tip">
          {{ tip }}
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  import useContainer from '@/hooks/useContainer';
  const { theDeviceType } = useContainer();

  const theProps = defineProps({
    showFooter: {
      type: Boolean,
      default: true,
    },
    type: {
      type: String,
      default: 'default', // default, theme
    },
    tip: {
      type: String,
      default: '',
    },
    modelValue: {
      type: Boolean,
      default: false,
    },
    okText: {
      type: String,
      default: '确认',
    },
    cancelText: {
      type: String,
      default: '取消',
    },
    width: {
      type: [Number, String],
      default: 708,
    },
    top: {
      type: [Number, String],
      default: '60px',
    },
    style: {
      type: Object,
      default: () => ({}),
    },
  });

  const theEmit = defineEmits(['update:modelValue', 'ok', 'cancel']);
  const onCancel = () => {
    theEmit('update:modelValue', false);
    theEmit('cancel');
  };
  const onOk = () => {
    // theEmit('update:modelValue', false);
    theEmit('ok');
  };
</script>

<style lang="scss" scoped>
  ::v-deep(.el-dialog) {
    background: #fff;
    border-radius: 28px;
    @media screen and (max-width: 768px) {
      margin-top: 5vh !important;
    }
  }
  .theme ::v-deep(.el-dialog) {
    background-color: #f0ece4 !important;
    border-radius: 28px;
  }

  .noborderRadius ::v-deep(.el-dialog) {
    background: #fff !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .noborderRadius ::v-deep(.el-dialog--center .el-dialog__body) {
    padding: 0 !important;
  }

  ::v-deep(.el-dialog__header) {
    padding: 0 !important;
  }

  .comp-dialog {
    &-title {
      font-size: 36px;
      color: #000000;
      @media screen and (max-width: 768px) {
        font-size: 24px;
      }
    }
    &-tip {
      width: 100%;
      height: 44px;
      background: #fcf8eb;
      border-radius: 10px;
      box-sizing: border-box;
      font-size: 14px;
      color: #dead25;
      display: flex;
      align-items: center;
      padding-left: 20px;
      margin-top: 20px;
    }
  }
  .confirm-receipt-dialog ::v-deep(.el-dialog__header) {
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 10px;
    padding: 0 !important;
  }

  .dialog-footer {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding-bottom: 10px;
  }
</style>
